<template>
  <view>
    <Head
      :goback_custom="true"
      @gobackCustomMethod="$emit('closePopout', is_set_password)"
    >
      {{ is_set_password == 1 ? "修改密码" : "设置登录密码" }}
    </Head>
    <view class="form_split_10"></view>
    <view class="notice_bar">
      账号密码{{
        is_set_password == 1 ? "修改" : "设置"
      }}成功后，请记住新密码以便下次登录时使用
    </view>
    <view class="log_wrapper">
      <view class="field_cell_group">
        <view class="field_cell" v-if="is_set_password == 1">
          <label>
            <input
			placeholder-style="color:#757575;font-size:14px !important;" 
              class="log_field"
              type="password"
              placeholder="原密码"
              v-model="old_password"
              autocomplete="off"
            />
          </label>
        </view>
        <view class="field_cell">
          <label>
            <input
			placeholder-style="color:#757575;font-size:14px !important;" 
              class="log_field"
              type="password"
              :placeholder="is_set_password == 1 ? '新密码' : '登录密码'"
              v-model="password"
              autocomplete="off"
            />
          </label>
        </view>
        <view class="field_cell">
          <label>
            <input
			placeholder-style="color:#757575;font-size:14px !important;" 
              class="log_field"
              type="password"
              placeholder="确认密码"
              v-model="password_confirm"
              autocomplete="off"
            />
          </label>
        </view>
        <view class="btn_group">
          <van-button
            class="btn_mb"
            type="info"
            size="large"
            round
            @click="handleSubmit"
          >
            提交
          </van-button>
        </view>
      </view>
    </view>
	<u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
export default {
  name: 'ResetPassword',
  props: ['is_set_password'],
  data () {
    return {
      old_password: '',
      password: '',
      password_confirm: ''
    }
  },
  methods: {
    initCB () {
      this.old_password = ''
      this.password = ''
      this.password_confirm = ''
    },
    // 提交
    handleSubmit () {
      let that = this
      if (!this.old_password && this.is_set_password == 1) {
		this.$refs.uTips.show({
			title:'请填写原密码',
			type: 'error'
		})
        return false
      }
      if (!this.password) {
		this.$refs.uTips.show({
			title:'请填写新密码',
			type: 'error'
		})
        return false
      }
      if (this.old_password === this.password && this.is_set_password == 1) {
		this.$refs.uTips.show({
			title:'新密码与原密码相同',
			type: 'error'
		})
        return false
      }
      if (!this.password_confirm) {
		this.$refs.uTips.show({
			title:'请确认密码',
			type: 'error'
		})
        return false
      }
      if (!Object.is(this.password_confirm, this.password)) {
		this.$refs.uTips.show({
			title:'两次输入的密码不一致',
			type: 'error'
		})
        return false
      }
      http
        .post(api.reset_password, {
          old_password: this.old_password,
          password: this.password,
          password_confirm: this.password_confirm
        })
        .then(res => {
          if (parseInt(res.data.code) === 200) {
			this.$refs.uTips.show({
				title:res.data.message,
				type: 'success'
			})
            setTimeout(() => {
              that.$emit('closePopout', this.is_set_password)
            }, 2000)
          } else {
			this.$refs.uTips.show({
				title:res.data.message,
				type: 'error'
			})
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.split_bar {
  width: 100%;
  height: 18rpx;
  background-color: #f3f3f3;
}
.notice_bar {
  width: 100%;
  padding: 28rpx 0 28rpx 70rpx;
  font-size: 24rpx;
  color: #ff6600;
  background: #fffbeb url($ImgUrl + "remind_ico.svg") 32rpx center
    no-repeat;
  background-size: 32rpx;
  margin-bottom: 30rpx;
}
.log_wrapper {
  width: 646rpx;
  margin: 0 auto;
}
.tx1 {
  padding: 110rpx 0 56rpx;
  font-size: 52px;
  color: #333333;
}
.field_cell {
  width: 100%;
  border-bottom: 2rpx solid #eeeeee;
  position: relative;
  margin-bottom: 40rpx;
}
.log_field {
  border: 0;
  width: 100%;
  height: 100%;
  color: #333333;
  font-size: 30rpx;
  &::placeholder {
    color: #c9c9c9;
  }
}
.log_get_btn {
  position: absolute;
  right: 0;
  bottom: 0;
  border: 0;
  height: 100%;
  font-size: 30rpx;
  color: #c9c9c9;
  padding: 0;
  background-color: #ffffff;
}
</style>
